<template>
  <div class="detailSize" v-if="Object.keys(goodsParams).length>0">
    <img :src="goodsParams.image" alt="" v-if="goodsParams.image">
    <div class="size" >
      <div class="sizeItem" v-for="(item,index) in goodsParams.sizes[0]" :key="index">
        <p v-for="(items,indexs) in item " :key="indexs">{{items}}</p>
      </div>
    </div>
    <div class="info">
      <div class="infoItem"  v-for="(item,index) in goodsParams.infos" :key="index">
        <p class="lt">{{item.key}}</p>
        <p class="rt">{{item.value}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    goodsParams:{
      type:Object,
      default(){
        return {}
      }
    }
  }

}
</script>
<style scoped>
.detailSize{
  padding:15px;
  color: #666;
  font-size: 14px;
  border-top: 5px solid #eee;
  border-bottom: 5px solid #eee;
  padding-top: 0;
}
.detailSize img{
  width: 100%;
}
.detailSize .size{
  width: 100%;
}
.detailSize .size .sizeItem{
  display: flex;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}
.detailSize .size .sizeItem p{
  flex:1;
}
.detailSize .info .infoItem{
  width: 100%; 
  display: flex;
  padding:10px 0;
  border-bottom: 1px solid #eee;
  line-height: 20px;
}
.detailSize .info .infoItem .lt{
  flex:0 1 30%;
}
.detailSize .info .infoItem .rt{
  flex:0 1 70%;
  text-align: left;
  color: red;
  
}
</style>